<template>
  <div class="signwrapper">
    <div class="sign">
      <!--<div class="sign-top">
        <img src="../../assets/img/aa.png"/>
        <img :src="imgObj"/>
      </div>-->
      <!--<mt-swipe class="qd_swipe" :showIndicators="false">
      	<mt-swipe-item class="aimg" v-for="(item,index) in lbarr" :key="index">
      		<img :src="item.LBIMG" @click="goLink(item.LJLX, item.URL, item.LJTP[0])"/>
      	</mt-swipe-item>
			</mt-swipe>-->
      <!--<div class="zw_line"></div>-->
      <div class="sign-main">
        <div class="sign-main-img">
          <img :src="bjtImg" />
        </div>
        <div class="sign-main-date">
          <div class="sign-main-date-inner">
            <div class="s-m-d-top">
              <div class="content">
                <span>陛下，您已连续签到{{signNum}}天</span>
                <span class="gz" @click="lookGz">活动规则</span>
              </div>
              <div class="imgawrap">
                <img src="../../assets/img/huan.png" v-for="item in 8" />
              </div>
            </div>
            <div class="s-m-d-bottom">
              <div class="dattt">
                <div v-for="item in (days - 1)" class="unit">
                  <div class="circle" :class="{active: tiaojianFn(item)}">{{item}}</div>
                  <div class="liner" :class="{active: tiaojianFn(item + 1)}"></div>
                </div>
                <!-- @click="toSignFn(item)" @click="toSignFn(7)"-->
                <div class="gift" :class="{active: tiaojianFn(days)}">
                  <i class="iconfont icon-lipin"></i>
                </div>
              </div>
              <div class="qdbtn" @click="signIn"><span>签</span><span>到</span></div>
              <!--<p>每连续签到7天，可获得一张礼品兑换券，集兑换券换特供礼品，不要白不要！</p>-->
            </div>
          </div>
        </div>
      </div>
      <div v-if="false" class="sign-bottom"></div>
    </div>
    <div v-if="isSuc" class="mask" @click="maskClose">
      <!--<div class="tip">
        <h2>签到成功</h2>
        <div>恭喜您</div>
        <div>获得
          <span>20</span>积分</div>
        <div class="lianxu">连续签到第2天</div>
      </div>
      <div class="btnWrapper">
        <div class="btn" @click="iscancel">知道了</div>
        <div class="btn" @click="goHl">去换礼</div>
      </div>-->
      <div class="tis">
      	<!--<div class="ph_suc"></div>-->
	      <img class="ph_suc" src="../../assets/img/qd_suc.png"/>
	      <div class="tit">恭喜您获得<span>{{jf}}</span>积分</div>
	      <p>连续签到第{{signNum}}天</p>
	      <div class="gobtn" @click.stop="goHl" v-if="signNum === 7">去逛逛</div>
      </div>
    </div>
    <div v-if="isGz" class="mask2">
    	<div class="showGz">
    		<!--<img class="gz_top" src="../../assets/img/gz_top.png"/>-->
    		<div class="gz_top"></div>
    		<div class="word">
    			<!--<p>1、活动时间：2018年6月24日-2018年10月24日。 </p>
    			<p>2、每日签到获得积分奖励，第一天至第七天连续签到梯度奖励.第一天5积分，第二天10积分。第7天140积分，一周期完成或中断从重新第一天开始，积分达150分可参加每日抽奖。</p>
    			<p>3、积分奖励直接进行积分帐户，仅限注册粉丝参与，非注册粉丝紴导注册。</p>
    			<p>4、更多业务详情，请您咨询客服热线000-000。</p>-->
    			<div v-html="gzhtml"></div>
    		</div>
    		<div class="gzbtn" @click="gzClose">我已了解</div>
    		<div class="close" @click="gzClose"></div>
    	</div>
    </div>
    <!-- 未登录防止点击 -->
		<Gmask :mshow="mshow"></Gmask>
  </div>
</template>

<script>
	import {MessageBox, Toast, Swipe, SwipeItem} from "mint-ui";
  import api from '@/api/api';
  import Gmask from '@/components/common/Gmask';
  export default {
  	components: {
			Gmask
		},
    data() {
      return {
        tiaojian: null,
        signNum: 0,
        limit: 0,
        judgeSign: false,
        isSuc: false,
        isGz: false,
        xfvipcode: '',
        imgObj: [],
        jf: 0,
        gzhtml: '',
        days: 6,
        bjtImg: '',
        lbarr: [],
        mshow: false
      }
    },
    methods: {
    	// 相应链接
    	goLink(type, url, ljtp) {
    		let that = this;
    		if (type === 0) {//链接地址
    			if (url == '') {
    				return false;
    			}
    			window.location.href= url;
    		} else {//链接图片
    			that.$router.push({path: '/signact', query: {ljtp: ljtp}})
    		}
    	},
      tiaojianFn (item) {
        console.log(item)
        var str = null
        let signNum = this.signNum
        if (signNum == 0) {
          str = item == 'a'
        } else if (signNum == 1) {
          str = item == 1
        } else if (signNum == 2) {
          str = item == 1 || item == 2
        } else if (signNum == 3) {
          str = item == 1 || item == 2 || item == 3
        } else if (signNum == 4) {
          str = item == 1 || item == 2 || item == 3 || item == 4
        } else if (signNum == 5) {
          str = item == 1 || item == 2 || item == 3 || item == 4 || item == 5
        } else if (signNum == 6) {
          str = item == 1 || item == 2 || item == 3 || item == 4 || item == 5 || item == 6
        } else if (signNum == 7) {
          str = item == 1 || item == 2 || item == 3 || item == 4 || item == 5 || item == 6 || item == 7
        }
        console.log('...')
        console.log(str)
        return str
      },
      toSignFn (item) {
        // 今日是否已经签到
        let that = this
				var judgeSignFn = function () {
            if (!that.judgeSign) {
              // 去请求
              that.judgeSign = false
            }
        }
        judgeSignFn();// 是否已签到
        if (!that.judgeSign) {
            if (item == that.signNum + 1) {
              if (that.limit < 1) {
                that.signNum = item
                that.limit++
                that.isSuc = true
              }
            } else {
              return
            }
          }
//      new Promise((resolve, reject) => {
//        var judgeSignFn = function () {
//          if (!that.judgeSign) {
//            // 去请求
//            that.judgeSign = false
//          }
//          
//        }
//        judgeSignFn()
//      }).then(result => {
//      	debugger
//        if (!that.judgeSign) {
//          if (item == this.signNum + 1) {
//            if (this.limit < 1) {
//              this.signNum = item
//              this.limit++
//              this.isSuc = true
//            }
//          } else {
//            return
//          }
//        }
//      })

      },
      // 查看规则
      lookGz() {
      	this.isGz = true;
      },
      // 关闭规则
      gzClose() {
      	this.isGz = false;
      },
      // 关闭mask
      iscancel() {
      	this.isSuc = false;
      },
      maskClose() {
      	this.isSuc = false;
      },
      goHl() {
//    	this.$router.push('/score');
      	this.$router.push({path: '/score'});
      },
      // 页面图片(轮播图)
	    getQdTp() {
	    	let that = this;
	    	api.getQdTp(this,function (res) {
	    		console.log('页面图片');
	    		console.log(res);
	    		var data = res.data;
	    		if (data.code === 0) {
	    			var list = data.data;
	    			for (var i = 0;i < list.length;i++) {
	    				list[i].LBIMG = that.host.filehost + list[i].LBT[0];// 轮播图片
	    			}
	    			that.lbarr = list;
	    		} else {
	    			Toast({
                message: data.msg,
                duration: 1500
            });
	    		}
	    	});
	    },
	    // 签到
	    signIn() {
	    	let that = this;
	    	let signNum = this.signNum;// 连续签到的天数
    		let xfvipcode = this.xfvipcode;
	    	api.signIn(this, xfvipcode, function (res) {
	    		console.log('签到');
	    		console.log(res);//{"msg":"","code":0,"data":{"bonus":5,"signInDays":1}}
	    		var data = res.data;
	    		if (data.code === 0) {
	    			var obj = data.data.data;
	    			that.jf = obj.bonus;// 积分
	    			that.signNum = obj.signInDays; // 连续签到的天数
	    			var xfvipcode = that.xfvipcode;
//	    			that.isSuc = true;// 弹出层
	    			that.$router.push({path: "/signrule",query: {jf: obj.bonus,zq: obj.qdzq,ts: obj.signInDays,fxjf: obj.fxjf, xfvipcode: xfvipcode}});// 弹出页
	    		} else {
	    			Toast({
                message: data.msg,
                duration: 1500
            });
	    		}
	    	});
	    },
	    // 签到设置
	    getQdSz() {
	    	let that = this;
	    	let p = new Promise((resolve,reject) => {
	    		api.getQdSz(this, function (res) {
		    		console.log('规则')
		    		console.log(res)
		    		var data = res.data;
		    		if (data.code === 0) {
		    			var obj = data.data;
		    			that.gzhtml = obj.QDGZ;//规则
		    			that.days = obj.QDZQ;// 周期
		    			let bjtImg = obj.BJT.map(x => {
	              return that.host.filehost + x
	           	});
		    			that.bjtImg = bjtImg[0];// 背景图 
		    			resolve(1);
		    		} else {
		    			Toast({
	                message: data.msg,
	                duration: 1500
	            });
	            reject(data.msg);
		    		}
		    	});
	    	});
	    	return p;
	    }
    },
    mounted() {
      let heig = document.documentElement.clientHeight
      console.log(heig)
      document.getElementsByClassName('sign')[0].style.height = heig + 'px';
//    document.getElementsByClassName('sign-main')[0].style.height = (heig - 163) + 'px';
			document.getElementsByClassName('sign-main')[0].style.height = heig + 'px';
    },
    created() {
    	console.log('进入界面')
//  	this.getQdTp();// 页面图片
    	let that = this;
    	let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
	    if (userinfo == null || userinfo.vipcode === "") {// 未登录
	    	that.mshow = true;
//			if (userinfo !== null && userinfo.vipcode !== "") {// 已登录
//	        MessageBox({
//	            title: "提示",
//	            message: "您还不是会员",
//	            showCancelButton: true,
//	            showCancelButton: false,
//	            confirmButtonText: "去注册",
//	            closeOnClickModal: false,
//	            confirmButtonClass: "zcbtn"
//	        }).then(action => {
//	            // 跳转到积分列表
//	            that.$router.push({path: "/register",query: {type: 'qdpage'}});
//	        });
	      return false;
	    } else {
	    	that.mshow = false;
	    	// 获取签到设置信息
	    	this.getQdSz().then((e) => {
		    	// 获取用户信息
		    	api.getUserInfo(that, function (res) {
		    		console.log('获取用户信息')
		    		console.log(res)
		    		var data = res.data;
		    		if (data.code === 0) {
		    			var obj = data.data;
		    			var isGq = false;
		    			var isGq2 = false;
		    			var isday = that.days;
		    			
		    			// 判断日期
		    			if (obj.XF_LASTSIGNINDATE == null) {
		    				
		    			} else {
		    				var dlist = obj.XF_LASTSIGNINDATE.split(' ')[0];
			    			var stime1 = dlist.replace(/-/g,'/');
			    			var date = new Date();
			    			var stime2 = date.getFullYear()+ '/' + (date.getMonth()+1) + '/' + date.getDate();
			    			var timestamp = Date.parse(stime1);
		    				var timestamp2 = Date.parse(stime2);
		    				isGq = timestamp2 - timestamp > 86400000 ? true : false;
		    				isGq2 = timestamp2 - timestamp == 86400000 ? true : false;
		    			}
		    			if ((obj.XF_SIGNINDAYS === isday) && isGq2) {
		    				that.signNum = 0;
		    			} else if (isGq) {
		    				that.signNum = 0;
		    			} else {
		    				that.signNum = obj.XF_SIGNINDAYS;
		    			}
		    			that.xfvipcode = obj.XF_VIPCODE;
		    		} else if(data.code === 9999){
              //orcal数据库异常 关闭当前窗口
              MessageBox.alert(data.msg, '温馨提示').then(action => {
                wx.closeWindow()
              })
            }else {
		    			Toast({
		    					message: data.msg,
	                duration: 1500
	            });
		    		}
		    	});
		    }).catch((err) => {
		    	console.log(err)
		    });
	    };
    }
  }

</script>

<style lang="less" scoped>
  .signwrapper {
  	.zcbtn {
        padding: 0.2rem;
    }
    .sign {
      /*background: #57a326;*/
     background-color: #f05dc4;
      .sign-top {
        width: 100%;
        height: 3.16rem;
        @media screen and (min-width: 768px) {
          height: 2rem;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .zw_line {
      	width: 100%;
      	height: 0.1rem;
      	background-color: #fffdff;
      }
      .sign-main {
        position: relative;
        overflow: hidden;
        .sign-main-img {
          width: 100%;
          height: 100%;
          position: relative;
          img {
            /*height: 4.4rem;*/
           	height: 100%;
            width: 100%;
           position: fixed;
           left: 0;
           top: 0;
          }
        }
        .sign-main-date {
          /*background: #57a326;*/
         	/*background-color: #57c727;*/
        	/*background: url(../../assets/img/qdbg2.jpg) repeat-y center;*/
          /*position: absolute;*/
         	/*top: 4.3rem;*/
          bottom: 0.8rem; 
         	position: fixed;
          left: 0;
          right: 0;
          padding: 0 0.3rem;
          /* @media screen and (min-width: 768px) {
            top: 5.6rem;
          } */
          .sign-main-date-inner {
            box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.5);
            border-radius: 0 0 0.16rem 0.16rem;
          }
          .s-m-d-top {
            /*background: #82c72c;*/
           background-color: #f05dc4;
            height: 0.84rem;
            position: relative;
            border: #f05dc4 solid 0.04rem;
            border-radius: 0.1rem 0.1rem 0 0;
            .content {
              display: flex;
              justify-content: space-between;
              margin: 0.3rem 0.2rem;
              font-size: 0.26rem;
              color: #ffffff;
              .gz {
              	text-decoration: underline;
              }
            }
            .imgawrap {
              display: flex;
              padding: 0 0.5rem;
              position: absolute;
              top: -0.2rem;
              img {
                width: 0.2rem;
                height: 0.38rem;
                background-color: transparent;
                margin-right: 0.6rem;
                &:last-child {
                  margin: 0;
                }
              }

            }
          }
          .s-m-d-bottom {
            /*height: 2.86rem;*/
            background: #ffffff;
            border-radius: 0 0 0.16rem 0.16rem;
            padding-bottom: 0.2rem;
            p {
              color: #61a859;
              font-size: 0.26rem;
              padding: 0 0.27rem 0.35rem 0.27rem;
            }
            .dattt {
              display: flex;
              justify-content: center;
              padding: 0.4rem 0.27rem 0.25rem 0.27rem;
            }
            .qdbtn {
            	width: 3rem;
            	height: 0.65rem;
            	background-color: #f05dc4;
            	color: #FFFFFF;
            	font-size: 0.3rem;
            	/*letter-spacing: 0.15rem;*/
            	text-align: center;
            	line-height: 0.65rem;
            	margin: 0 auto;
            	margin-bottom: 0.2rem;
            	border-radius: 0.1rem;
            	span {
            		margin: 0 0.08rem;
            	}
            }
            .gift {
              width: 0.74rem;
              height: 0.74rem;
              border-radius: 50%;
              background: #b4a49c;
              color: #ffffff;
              display: flex;
              justify-content: center;
              align-items: center;
              &.active {
                background: #f05dc4;
              }
              i {
                font-size: 0.4rem;
              }
            }
            .unit {
              display: flex;
              align-items: center;
              .circle {
                width: 0.58rem;
                height: 0.58rem;
                border-radius: 50%;
                background: #b4a49c;
                color: #ffffff;
                font-size: 0.34rem;
                text-align: center;
                line-height: 0.58rem;
                &.active {
                  transform: scale(1.2);
                  background: #f05dc4;
                }
              }
              .liner {
                width: 0.38rem;
                height: 0.04rem;
                background: #eff0e8;
                &.active {
                  background: #fcbe2b;
                }
              }
            }
          }
        }
      }
      .sign-bottom {
        height: 0.22rem;
        width: 100%;
        background: #b80932;
        position: fixed;
        bottom: 0;
        left: 0;
      }

    }
    .mask2 {
    	background: rgba(0, 0, 0, 0.6);
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .showGz {
      	width: 6.68rem;
      	border-radius: 0.42rem;
      	background-color: #f4f4f4;
      	position: relative;
      	.gz_top {
      		width: 6.68rem;
      		height: 1.48rem;
      		border-radius: 0.42rem 0.42rem 0 0;
      		vertical-align: top;
      		background: url(../../assets/img/gz_top.png) no-repeat center;
      		background-size: cover;
      	}
      	.word {
      		padding: 0.42rem 0.5rem;
      		p {
      			line-height: 0.46rem;
      			font-size: 0.24rem;
      			margin-bottom: 0.08rem;
      		}
      	}
      	.gzbtn {
      		width: 3.49rem;
      		height: 0.72rem;
      		border-radius: 0.36rem;
      		color: #FFFFFF;
      		font-size: 0.3rem;
      		line-height: 0.72rem;
      		text-align: center;
      		background-color: #F05DC4;
      		margin: 0 auto;
      		margin-bottom: 0.46rem;
      	}
      	.close {
      		position: absolute;
      		top: 0.18rem;
      		right: 0.13rem;
      		width: 0.6rem;
      		height: 0.6rem;
      		border-radius: 50%;
      		z-index: 99;
      	}
      }
    }
    .mask {
      background: rgba(0, 0, 0, 0.6);
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .tis {
      	width: 5.55rem;
      	padding-top: 2.5rem;
	     	background-color: #f2f2f2;
	     	border-radius: 0.12rem;
	     	position: relative;
	     	.ph_suc {
	      	width: 3.95rem;
	      	height: 3.5rem;
	      	position: absolute;
	      	left: 50%;
	      	top: -1.5rem;
	      	margin-left: -1.92rem;
	      	background-color: transparent;
	      	/*img {
	      		width: 100%;
	      		height: 100%;
	      	}*/
	      }
	      .tit {
	      	text-align: center;
	      	font-size: 0.32rem;
	      	color: #000000;
	      	line-height: 0.6rem;
	      	span {
	      		color: #ff5600;
	      	}
	      }
	      p {
	      	text-align: center;
	      	font-size: 0.24rem;
	      	color: #767676;
	      	line-height: 0.44rem;
	      	margin-bottom: 0.6rem;
	      }
	      .gobtn {
	      	width: 100%;
	      	height: 0.88rem;
	      	text-align: center;
	      	line-height: 0.88rem;
	      	font-size: 0.32rem;
	      	color: #000000;
	      	background-color: #FFFFFF;
	      	border-radius: 0 0 0.12rem 0.12rem;
	      }
      }
    }
    .qd_swipe {
    	height: 3.16rem;
    	.aimg {
    		width: 100%;
    		height: 3.16rem;
    		
    		img {
    			width: 100%;
    			height: 100%;
    		}
    	}
    }
  }

</style>
